<template>
	<view class="pages">
		<view class="wrap">
			<u-swiper :list="list" img-mode="scaleToFill" height="400"></u-swiper>
		</view>
		<!-- <view>
			<image :src="baseUrl+rent.imgs" mode="aspectFill" class="carPics"></image>
		</view> -->
		<view class="cm_boxs" style="margin-top: -10rpx;">
			<view class="u-flex">
				<text class="title">{{rent.code}}</text>
				<view class="f1"></view>
				<text class="cm_price_tip">{{rent.rentFee}}</text>
				<text class="cm_time" style="margin-top: 10rpx;">/天</text>
			</view>
			<view class="cm_time" style="margin-top: 10rpx;">{{rent.brand}}</view>
			<view class="grayBoxs">
				<view class="u-flex">
					<text class="labels">取车地点</text>
					<view class="f1">
						{{rent.takePlace}}
					</view>
				</view>
				<view style="width: 100%;height: 30rpx;"> </view>
				<view class="u-flex">
					<text class="labels">用车时间</text>
					<view class="f1">
						{{rent.beginTime}}—{{rent.endTime}}
					</view>
				</view>
			</view>
		</view>

		<view class="cm_boxs">
			<view class="cm_title">车辆配置</view>
			<view class="u-flex configBox">
				<view class="configItems u-flex">
					<text class="labels">车型</text>
					<view class="f1">
						{{rent.type}}
					</view>
				</view>
				<view class="configItems u-flex">
					<text class="labels">发动机</text>
					<view class="f1">
						{{rent.gear}}
					</view>
				</view>
				<view class="configItems u-flex">
					<text class="labels">排量</text>
					<view class="f1">
						{{rent.displacement}}T
					</view>
				</view>
				<view class="configItems u-flex">
					<text class="labels">座数</text>
					<view class="f1">
						{{rent.seat}}
					</view>
				</view>
				<view class="f1"></view>
			</view>
		</view>


		<view class="cm_boxs">
			<view class="cm_title">租车须知</view>
			<view class="noteBox">
				<view class="title">取车凭证</view>
				<view class="cm_time"> 身份证原件（有效期1个月以上）</view>
				<view class="cm_time"> 驾驶证原件（有效期2个月以上、驾龄需6个月以上）</view>
				<view class="cm_time"> 国内信用卡（有效期1个月以上）</view>
			</view>
			<view class="noteBox">
				<view class="title">取消规则</view>
				<view class="tables">
					<view class="rows u-flex rows-header">
						<view class="cells cell-header">取消时间</view>
						<view class="cells cell-content ">免费取消</view>
					</view>
					<view class="rows u-flex ">
						<view class="cells cell-header">取车前24小时</view>
						<view class="cells cell-content green">扣费标准</view>
					</view>
					<view class="rows u-flex ">
						<view class="cells cell-header">取车前24小时-取车时间</view>
						<view class="cells cell-content">扣订单总费用30%</view>
					</view>
					<view class="rows u-flex ">
						<view class="cells cell-header">取车时间后</view>
						<view class="cells cell-content">扣订单总费用100%</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer saveBottom">
			<view class="flex">
				<view class="actions u-flex-y">
					<image src="../../../static/images/sy_xx.png" mode="aspectFill" class="icons"></image>
					<text class="cm_time">客服</text>
				</view>
				<view class="f1" style="padding-right: 30rpx;">
					<u-button @click="submit" shape="circle" class="f1" type="primary">预约车辆</u-button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import SET from '@/SET.js'
	export default {
		data() {
			return {
				rent: {
					code: '',
					rentFee:'',
					brand:'',
					takePlace:'',
					beginTime:'',
					endTime:'',
					seat: '',
					type: '',
					gear: '',
					displacement: '',
				},
				baseUrl: SET.baseUrl,
				list: []
			};
		},
		onLoad() {
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			// eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
			// eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', (data) => {
				this.rent = data.rent
				this.list = this.rent.imgs.split(",").map(data => {
					return {
						image: this.baseUrl + data
					}
				})
				console.log(this.list)
			})
		},
		methods: {
			submit() {
				let rent = this.rent
				uni.navigateTo({
					url: '/pages/features/createOder/createOder',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage(data) {
							console.log(data)
						},
						someEvent(data) {
							console.log(data)
						}
					},
					success(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							rent
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 10rpx;
		width: 100%;
		height: 422rpx;
	}

	.pages {
		padding-bottom: 150rpx;

		.carPics {
			width: 100%;
			height: 422rpx;
			background-color: #fff;
		}




		.grayBoxs {
			margin-top: 32rpx;
			background-color: #f5f5f5;
			padding: 30rpx;
			border-radius: 12rpx;
			font-size: 26rpx;

			.labels {
				color: #666;
				width: 164rpx;
				text-align: left;
			}
		}

		.configBox {
			flex-wrap: wrap;

			.configItems {
				width: 50%;
				line-height: 70rpx;

				.labels {
					color: #666;
					width: 164rpx;
					text-align: left;
				}
			}
		}

		.noteBox {
			border-bottom: 1rpx solid #f8f8f8;
			padding: 16rpx 0 20rpx 0;

			.title {
				font-size: 26rpx;
				font-weight: 400;
				margin-bottom: 24rpx;
			}

			.cm_time {
				line-height: 2;
				text-indent: 20rpx;
			}
		}

		.tables {
			border-top: 1rpx solid #f8f8f8;
			border-left: 1rpx solid #f8f8f8;
			margin-top: 16rpx;

			.cells {
				color: #666;
				height: 74rpx;
				line-height: 74rpx;
				text-align: left;
				padding: 0 20rpx;
				border-right: 1rpx solid #f8f8f8;
				// color: #666;
				border-bottom: 1rpx solid #f8f8f8;
			}

			.rows-header {
				color: #333;
				background-color: rgba(206, 225, 245, .2);

				.cells {
					color: #333;
				}
			}

			.cell-header {
				flex: 1
			}

			.cell-content {
				width: 282rpx;
			}

			.green {
				background-color: #E4F9F3;
				color: #109E70;
			}
		}


		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;

			.actions {
				width: 98rpx;
				height: 98rpx;
			}

			.icons {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>
